import { useEffect, useState } from "react";
import "./App.css";

function queryData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(666)
        }, 2000)
    })
}

function App() {
    /* 
      useEffect
      1. 支持在函数执行时，执行一些额外的逻辑，就是副作用
      2. useEffect的顶级函数不能写async关键字，如果需要使用async/await，则在内部再声明一个函数
      3. 组件挂载：useEffect的第二个参数如果是空数组，或者里面的内容不变化，则只会执行一次；
         组件更新：如果里面的值是状态会发生改变，则每次改变，useEffect的回调都会执行一次
         组件卸载：参数II是空数组，并且参数1返回一个函数即可
    */
  const [num, setNum] = useState(0);

  useEffect(() => {
    console.log('useEffect执行了');
    // 1. 写法1:
    // async function getData () {
    //     const data = await queryData()
    //     setCount(data)
    // }
    // getData()

    // 2. 写法2:
    queryData().then(data => {
        setNum(data)
    })
    const timer = setInterval(() => {
        console.log('定时器执行');
    }, 1000)
    return () => {
        // 在这里进行销毁
        console.log('clean up');
        clearInterval(timer)
    }
  }, [num])
  return (
    <>
      <div className="card">
        <button onClick={() => setNum((count) => count + 1)}>
          count is {num}
        </button>
      </div>
    </>
  );
}

export default App;
